<template>
	<view class="agreement-container">
		<!-- 加载状态 -->
		<view class="loading-section" v-if="isLoading">
			<u-loading mode="circle" color="#73F0EA" size="40"></u-loading>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 协议内容 -->
		<scroll-view scroll-y="true" class="content-scroll" v-else-if="content">
			<view class="agreement-content">
				<!-- 协议标题区域 -->
				<view class="title-section" v-if="agreementTitle">
					<text class="main-title">{{agreementTitle}}</text>
					<text class="update-time" v-if="updateTime">更新时间：{{updateTime}}</text>
				</view>
				
				<!-- HTML内容区域 -->
				<view class="html-content">
					<u-parse :html="processedContent"></u-parse>
				</view>
				
				<!-- 底部留白 -->
				<view class="bottom-spacer"></view>
			</view>
		</scroll-view>
		
		<!-- 错误状态 -->
		<view class="error-section" v-else>
			<u-icon name="wifi-off" color="#CCCCCC" size="80"></u-icon>
			<text class="error-title">加载失败</text>
			<text class="error-desc">网络连接异常，请检查网络后重试</text>
			<view class="retry-btn" @click="retryLoad">
				<u-icon name="reload" color="#73F0EA" size="16"></u-icon>
				<text class="retry-text">重新加载</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		agreement
	} from '@/api/common.js'
	
	export default {
		data() {
			return {
				content: '',
				isLoading: true,
				agreementTitle: '',
				updateTime: '',
				params: null
			}
		},
		
		computed: {
			// 处理HTML内容，优化显示效果
			processedContent() {
				if (!this.content) return '';
				
				let processed = this.content;
				
				// 为图片添加统一样式
				processed = processed.replace(/<img/g, '<img style="width: 100%; border-radius: 12rpx; margin: 20rpx 0; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);"');
				
				// 为段落添加样式
				processed = processed.replace(/<p/g, '<p style="line-height: 1.8; margin: 16rpx 0; color: #333; font-size: 28rpx;"');
				
				// 为标题添加样式
				processed = processed.replace(/<h([1-6])/g, '<h$1 style="margin: 32rpx 0 16rpx 0; color: #333; font-weight: bold;"');
				
				return processed;
			}
		},
		
		methods: {
			// 获取协议内容 - 添加完整的错误处理
			getAgreement(params) {
				this.isLoading = true;
				
				agreement(params).then(({data: res}) => {
					if (res.code === 1) {
						uni.setNavigationBarTitle({
							title: res.data.title || '协议详情'
						});
						
						this.content = res.data.content || '';
						this.agreementTitle = res.data.title || '';
						this.updateTime = res.data.update_time || '';
						this.isLoading = false;
					} else {
						this.handleError(res.msg || '获取协议内容失败');
					}
				}).catch(error => {
					console.error('获取协议失败:', error);
					this.handleError('网络异常，请重试');
				});
			},
			
			// 错误处理
			handleError(message) {
				this.isLoading = false;
				this.content = '';
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			},
			
			// 重新加载
			retryLoad() {
				if (this.params) {
					this.getAgreement(this.params);
				}
			}
		},
		
		onLoad(params) {
			console.log('协议页面参数:', params);
			this.params = params;
			this.getAgreement(params);
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.agreement-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 加载状态 */
	.loading-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		.loading-text {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #666666;
		}
	}

	/* 内容区域 */
	.content-scroll {
		flex: 1;
		height: 100vh;
	}

	.agreement-content {
		background: #ffffff;
		margin: 0;
		min-height: 100vh;
	}

	/* 标题区域 */
	.title-section {
		padding: 40rpx 32rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: linear-gradient(135deg, #73F0EA 0%, #81CAC5 100%);
		
		.main-title {
			display: block;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 1.4;
			margin-bottom: 16rpx;
		}
		
		.update-time {
			display: block;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	/* HTML内容区域 */
	.html-content {
		padding: 32rpx;
		
		// 深度选择器优化HTML内容样式
		::v-deep {
			// 段落样式
			p {
				line-height: 1.8 !important;
				margin: 16rpx 0 !important;
				color: #333333 !important;
				font-size: 28rpx !important;
				text-align: justify;
			}
			
			// 标题样式
			h1, h2, h3, h4, h5, h6 {
				margin: 32rpx 0 16rpx 0 !important;
				color: #333333 !important;
				font-weight: bold !important;
				line-height: 1.3 !important;
			}
			
			h1 { font-size: 40rpx !important; }
			h2 { font-size: 36rpx !important; }
			h3 { font-size: 32rpx !important; }
			h4 { font-size: 30rpx !important; }
			h5 { font-size: 28rpx !important; }
			h6 { font-size: 26rpx !important; }
			
			// 列表样式
			ul, ol {
				margin: 16rpx 0 !important;
				padding-left: 32rpx !important;
				
				li {
					margin: 8rpx 0 !important;
					color: #333333 !important;
					font-size: 28rpx !important;
					line-height: 1.6 !important;
				}
			}
			
			// 图片样式
			img {
				width: 100% !important;
				border-radius: 12rpx !important;
				margin: 20rpx 0 !important;
				box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1) !important;
			}
			
			// 强调文本
			strong, b {
				color: #73F0EA !important;
				font-weight: bold !important;
			}
			
			// 链接样式
			a {
				color: #73F0EA !important;
				text-decoration: underline !important;
			}
			
			// 分割线
			hr {
				border: none !important;
				height: 2rpx !important;
				background: linear-gradient(90deg, transparent, #e0e0e0, transparent) !important;
				margin: 32rpx 0 !important;
			}
			
			// 表格样式
			table {
				width: 100% !important;
				border-collapse: collapse !important;
				margin: 24rpx 0 !important;
				
				th, td {
					border: 1rpx solid #e0e0e0 !important;
					padding: 16rpx !important;
					text-align: left !important;
					font-size: 26rpx !important;
				}
				
				th {
					background: #f8f8f8 !important;
					font-weight: bold !important;
					color: #333333 !important;
				}
			}
		}
	}

	/* 底部留白 */
	.bottom-spacer {
		height: 80rpx;
		background: #ffffff;
	}

	/* 错误状态 */
	.error-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
		background: #ffffff;
		
		.error-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin: 32rpx 0 16rpx;
		}
		
		.error-desc {
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			line-height: 1.5;
			margin-bottom: 40rpx;
		}
		
		.retry-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx 32rpx;
			background: rgba(115, 240, 234, 0.1);
			border: 2rpx solid #73F0EA;
			border-radius: 50rpx;
			
			.retry-text {
				margin-left: 8rpx;
				font-size: 28rpx;
				color: #73F0EA;
			}
			
			&:active {
				background: rgba(115, 240, 234, 0.2);
			}
		}
	}
</style>